<template>
    <div class="Friends">
      <header>
        <div class="head">
          <p>朋友</p>
          <p><span></span><span></span></p>
        </div>
      </header>
      <section>
        <ul>
          <li>
            <p class="sec_img"><span></span></p>
            <p>生活号</p>
            <p>出行途中的美齿小...</p>
          </li>
          <li>
            <p class="sec_img"><span></span></p>
            <p><router-link to="/Small">小程序</router-link></p>
            <p>发现更多服务</p>
          </li>
          <li>
            <p class="sec_img"><span></span></p>
            <p><router-link to="/Life">生活圈</router-link></p>
            <p>和朋友分享生活</p>
          </li>
        </ul>
      </section>
      <article>
        <div class="art_info">
          <div class="art_f_left">
            <img src="../../static/img/friends_21.jpg">
          </div>
          <div class="art_f_right">
            <p><router-link to="/Service"><span>服务提醒（含支付助手）</span><span>11:07</span></router-link> </p>
            <p>又有好友收了你的绿色能量</p>
          </div>
        </div>
        <div class="art_info">
          <div class="art_f_left-2">
            <img src="../../static/img/friends_25.jpg">
          </div>
          <div class="art_f_right">
            <p><router-link to="/Chat"><span>快乐的哒</span><span>11:07</span></router-link></p>
            <p>[蚂蚁庄园]又有小鸡来吃饲料</p>
          </div>
        </div>
        <div class="art_info">
          <div class="art_f_left-2">
            <img src="../../static/img/friends_28.jpg">
          </div>
          <div class="art_f_right">
            <p><span>手机充值</span><span>11:07</span></p>
            <p>与你同了，抽奖最高可得188元！</p>
          </div>
        </div>
      </article>
      <app-ffooter></app-ffooter>
    </div>
</template>

<script>
  import Ffooter from './Ffooter'
    export default {
        name: "Friends",
      components:{
        "app-ffooter":Ffooter
      },
    }
</script>

<style scoped>
  header{
    background: #1e82d2;
    color: #fff;
    padding: 0 .8rem;
  }
  header .head{
    display: flex;
    padding: .8rem 0;
    align-items: center;
    font-size: 1.2rem;
  }
  header .head p:first-child{
    width: 54%;
    text-align: right;
  }
  header .head p:last-child{
    width: 46%;
    text-align: right;
  }
  header .head p span{
    display: inline-block;
    width: 2rem;
    height: 2rem;
  }
  header .head p>span:nth-child(1){
    background: url(../../static/img/friends_03.jpg) no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    margin-right: 1.5rem;
    height: 1.5rem;
  }
  header .head p>span:nth-child(2){
    background: url(../../static/img/friends_05.jpg) no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    height: 1.5rem;
  }
  section ul{
    display: flex;
    align-items: center;
    background: #fff;
    font-size: 1rem;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
    padding: .5rem 0;
  }
  section ul li{
    width: 33%;
    border-right: 1px solid #ececec;
    line-height: 1.2rem;
  }
  section ul li:last-child{
    border: none;
  }
  section ul li p{
    text-align: center;
  }
  section ul>li>p>span{
    display: inline-block;
  }
  section ul li:nth-child(1) p.sec_img>span{
    background: url(../../static/img/friends_10.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    width: 3.3rem;
    height: 3.3rem;
  }
  section ul li:nth-child(2) p.sec_img>span{
    background: url(../../static/img/friends_13.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    width: 3rem;
    height: 2.9rem;
  }

  section ul li:nth-child(3) p.sec_img>span{
    background: url(../../static/img/friends_15.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    width: 2.8rem;
    height: 2.9rem;
  }
  section ul>li>p:nth-child(3){
    text-align: center;
    width: 100%;
    color: #a5a5a5;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
  }
  article{
    background: #fff;
  }
  article div.art_info{
    display: flex;
    padding: .5rem;
    border: 1px solid #ececec;
  }
  article div.art_info .art_f_left img{
    width: 4rem;
  }
  article div.art_info .art_f_left-2 img{
    width: 3.7rem;
    height: 3.7rem;
  }
  article div.art_info .art_f_right{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: .5rem;
    margin-left: .2rem;
  }
  /*div.art_info .art_f_right p:nth-child(1) span:nth-child(2),*/
  /*div.art_info .art_f_right p:nth-child(2){*/
    /*color: #a1a1a1;*/
    /*font-size: .9rem;*/
  /*}*/
  .art_f_right p:first-child span:last-child{
    color: #a1a1a1;
    font-size: .7rem;
  }
  .art_f_right p:first-child span:first-child{
    font-size: 1rem;
    color: black;
    font-weight: 800;
  }
  .art_f_right p:nth-child(2){
    font-size: .9rem;
    color: #a1a1a1;
  }
  div.art_info .art_f_right p:nth-child(1){
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
</style>
